<template>
	<view>
		<!-- 头部header -->
		<view class="header">
			<uni-nav-bar :statusBar="true" leftIcon="arrowleft" fixed="true" title="档口人员" @clickLeft="clickLeft"></uni-nav-bar>
		</view>

		<!-- 在岗人员 -->
		<view class="on-job-details">
			<view class="p-content on-job-wrap">
				<nav-bar :activeFlag="activeFlag" @switchStatus="switchStatus"></nav-bar>
				<view class="on-job container-lump">
					<view class="on-job-content" v-show="onJobList && onJobList.length > 0">
						<view class="on-job-item" v-for="(item,index) in onJobList" @click="toPersonInfo(item.orgId, item.userId)">
							<view class="staff-avatar">
								<!-- <img class="staff-img" v-lazy="imgHeaderUrl + item.fileId" :key="index" v-if="item.fileId"> -->
								<!-- <img class="staff-img" src="../../../assets/images/sun_dining/common/default_lead_avatar.jpg" :key="index" -->
								<!-- v-else> -->
								<image class="staff-img" :src="imgHeaderUrl + item.fileId" mode=""></image>
							</view>
							<view class="staff-info">
								<p class="staff-name">{{item.userName}}</p>
								<!--                            <p class="staff-num">{{item.employeeNumber }}</p>-->
								<!--                            <p class="staff-post">{{item.postName}}</p>-->
								<p class="staff-num" v-if="item.teperatureTime">
									<span>{{item.teperatureTime}}</span>
									<span>打卡</span>
								</p>
								<p class="staff-temperature" :class="{'temperature-abnormal': item.teperatureStatus === 0}" v-if="item.bodyTeperature">
									<span>{{item.bodyTeperature}}</span>
									<span>°C</span>
									<span>{{item.teperatureStatus | teperatureStatus}}</span>
								</p>
							</view>
							<view class="normal" v-if="item.status != null || item.status != ''" :class="onJobStatus[item.status]">
								<span class="text">
									{{onJobName[item.status]}}
								</span>
							</view>
						</view>
					</view>
					<!-- 无内容 -->
					<view class="on-job-content-null" v-show="onJobList.length === 0">
						<view v-if="activeType === 'today'">
							<!-- <img class="no-personal-img" src="../../../assets/images/sun_dining/common/no-personal.png" alt="暂无人员"> -->
							<view class="no-personal-text">暂无在岗人员</view>
						</view>
						<view v-else>(无)</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import navBar from './nav'
	export default {
		data() {
			return {
				activeFlag: 0,
				onJobList: [],
				imgHeaderUrl: uni.getStorageSync('imgServerHost') + ':' + uni.getStorageSync('imgServerPort') + '/img/',
				onJobStatus: ['expired', 'due-expired', 'normal'],
				onJobName: ['已到期', '即将到期', ''],
				activeType: '',
				statusList: {
					'all': [],
					'today': [],
					'due': [],
					'abnormal': [],
					'expired': []
				},
				contractorId: '',
				departmentId: ''


			}
		},
		onLoad(router) {
			console.log(router)
			this.contractorId = router.contractorId
			this.departmentId = router.departmentId
			this.initPage()
		},
		methods: {
			/**
			 * @description: 返回上一页
			 * @author: LinW (xuebingchuan_20@163.com)
			 * @createDate: 2020-10-10 10:40
			 */
			clickLeft() {
				uni.navigateBack()
			},
			/**
			 * @description: 切换 (全部 即将到期 已过期)
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2019-12-31 16:10
			 * @param: type status 类型 与 data中和HTML中对应
			 */
			switchStatus(type, idx) {
				this.activeFlag = idx
				this.activeType = type
				this.onJobList = this.statusList[type] ? this.statusList[type] : []
			},
			/**
			 * @description: 页面初始化
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2019-12-31 16:02
			 */
			initPage() {
				this.getOnPostInfoFunc()
			},
			/**
			 * @description: 获取人员信息
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2019-12-31 16:02
			 */
			getOnPostInfoFunc() {
				let params = {
					contractorId: this.contractorId,
					departmentId: this.departmentId
				}
				this.$request.ygstEmployeeOnpostDeptcontraListGet(params).then(res => {
					// Indicator.close()
					if (res && res.length > 0) {
						const data = res
						this.onJobList = data
						this.statusList['all'] = this.onJobList
						this.statusList['due'] = this.onJobList.filter(item => item.status === '1')
						this.statusList['expired'] = this.onJobList.filter(item => item.status === '0')
						this.statusList['today'] = this.onJobList.filter(item => item.teperatureStatus === 1)
						this.statusList['abnormal'] = this.onJobList.filter(item => item.teperatureStatus === 0)
					}
				}).catch(e => {
					// Indicator.close()
					this.$toast(e.msg || e)
				})
			},
			/**
			 * @description: 跳转到人员信息信息页面
			 * @author: LinW (evan_origin@163.com)
			 * @createDate: 2019-12-31 16:02
			 * @param: orgId 组织ID
			 * @param: userId 用户ID
			 * @return:
			 */
			toPersonInfo(orgId, userId) {
				console.log(orgId,userId,this.contractorId)
				uni.navigateTo({
					url:`./personInfo/personInfo?contractorId=${this.contractorId}&userId=${userId}&orgId=${orgId}&departmentId=${this.departmentId}`,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.on-job-details {
		.on-job-wrap {
			width: 100%;
			height: 100%;
			background-color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			display: flex;
			flex-direction: column;

			/* 状态选择 */
			.status-type-wrap {
				width: 100%;
				padding: 2rem 0px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;

				.status-list {
					box-sizing: border-box;
					display: flex;
					flex-flow: row nowrap;
					justify-content: center;
					align-items: center;

					.status-item {
						width: 25%;
						height: 30px;
						line-height: 28px;
						text-align: center;
						color: #44D696;
						border: 1px solid #44D696;
					}

					.all {
						border-top-left-radius: 30px;
						border-bottom-left-radius: 30px;
						border-right: none;
					}

					.expired {
						border-top-right-radius: 30px;
						border-bottom-right-radius: 30px;
						border-left: none;
					}

					.active {
						color: #fff;
						background-color: #44D696;
					}
				}
			}

			.on-job {
				flex: 1;
				height: 100%;
				overflow-y: auto;
				background-color: #fff;

				.on-job-content-null {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					text-align: center;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #C1C1C1;

					.no-personal-img {
						width: 15rem;
						height: 100%;
					}

					.no-personal-text {
						margin: 10px auto;
					}
				}

				.on-job-content {
					padding: 2rem 1.2rem 1.2rem;
					display: flex;
					flex-flow: row wrap;

					.on-job-item {
						width: 27.3%;
						text-align: center;
						margin-bottom: 20px;
						padding: 0px 10px;

						.staff-avatar {
							width: 130rpx;
							height: 130rpx;
							margin: 0 auto 12px auto;

							.staff-img {
								width: 100%;
								height: 100%;
								border-radius: 50%;
								object-fit: contain;
							}

							img[lazy="loading"] {
								opacity: .1;
								object-fit: scale-down;
							}

							img[lazy="loaded"] {
								opacity: 1;
								transition: opacity .5s;
							}
						}

						.staff-info {
							margin-bottom: 8px;

							.staff-name {
								font-size: 26rpx;
								font-weight: bold;
								color: #2b2b2b;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.staff-num {
								margin: 5px auto;
								font-size: 0.86rem;
								color: #C1C1C1;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.staff-post {
								font-size: 1.33rem;
								font-weight: bold;
								color: #2b2b2b;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.staff-temperature {
								margin: 5px auto;
								font-size: 1.4rem;
								color: #fff;
								background: #44D696;
								border-radius: 15px;
								padding: 2px 4px;
							}

							.temperature-abnormal {
								background: #FF5959;
							}
						}

						.normal {
							width: 5.3rem;
							height: 2rem;
							line-height: 2rem;
							display: table;
							text-align: center;
							margin: 0 auto;
							font-size: 1.2rem;
							border-radius: 4px;
							overflow: hidden;

							/*transform: scale(0.5);*/
							/*transform-origin: 100% 100%;*/
							.text {
								display: table-cell;
								vertical-align: middle;
							}

						}

						.expired {
							color: #FF5A59;
							border: 1px solid #FF5A59;
						}

						.due-expired {
							color: #FC9C1E;
							border: 1px solid #FC9C1E;
						}
					}
				}
			}
		}
	}
</style>
